<template>
	<view class="search">
		<MicHid title="搜索" :icon="true" :iconblack="true"></MicHid>
		<view class="container">
			<scroll-view scroll-y="true" >
				<view class="search-search">
					<text class="iconfont icon-fangdajing"></text>
					<input type="text" placeholder="搜索歌曲"v-model="searchWord" @confirm="handleToSearch(searchWord)"@input="handleToSuggest"/>
					<text class="iconfont icon-guanbi" v-show="searchTap!=1"@tap="handleToClose"></text>
				</view>
				<block v-if="searchTap==1">
					<view class="search-history">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont icon-shanchu" @tap="handleToClear"></text>
						</view>
						<view class="search-history-list">
							<view@tap="handleToWord(item)" v-for="(item,index) in searchHistory">{{item}}</view>
							
						</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
						<view class="search-hot-item"v-for="(item,index) in searchHot" :key="item.id" @tap="handleToWord(item.searchWord)">
							<view class="search-hot-top">{{index+1}}</view>
							<view class="search-hot-word">
								<view>
									{{item.searchWord}} <image :src="item.iconUrl" mode="aspectFit"></image>
								</view>
								<view>{{item.content}}</view>
							</view>
							<text class="search-hot-count">{{item.score}}</text>
						</view>
					</view>
				</block>
				<block v-else-if="searchTap==2">
					<view class="search-result">
						<view class="search-result-item" @tap="handleToDetail(item.id)" v-for="(item,index) in searchList" :key="item.id">
							<view class="search-result-word">
								<view>{{item.name}}</view>
								<view>{{item.artists[0].name}} - {{item.album.name}}</view>
							</view>
							<text class="iconfont icon-bofang"></text>
						</view>
					</view>
				</block>
				<block v-else-if='searchTap=3'>
					<view class="search-suggest">
						<view class="search-suggest-head">搜索”{{searchWord}}”</view>
						<view class='search-suggest-item' @tap="handleToWord(item.keyword)" v-for="(item,index) in searchSuggest" :key="item.id">
							<text class="iconfont icon-fangdajing"></text>{{item.keyword}}
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import MicHid from '../../components/MicHid/MicHid.vue'
	import {searchHot,searchSuggest,searchWord} from '../../comm/api.js'
	export default {
		data() {
			return {
				searchHot:[],
				searchWord:'',
				searchHistory:[],
				searchTap: 1,
				searchList:[],
				searchSuggest:[]
			}
		},
		methods: {
			handleToWord(name){
				this.searchWord = name
				this.handleToSearch(name)
			},
			handleToSearch(val){
				this.searchHistory.unshift(val)
				this.searchHistory = [...new Set(this.searchHistory)];
				if(this.searchHistory.length>10){
					this.searchHistory.length = 10;
				}
				uni.setStorageSync('searchHistory',this.searchHistory)
				this.getSearchList(val)
			},
			handleToClear(){
				uni.removeStorageSync('searchHistory')
				this.searchHistory = []
			},
			getSearchList(val){
				console.log(val)
				searchWord(val).then(res=>{
					if(res[1].data.code == '200'){
						console.log(res)
						this.searchList = res[1].data.result.songs;
						this.searchTap = 2
					}
				})
			},
			handleToClose(){
				this.searchWord = []
				this.searchTap = 1
				this.searchWord = ''
			},
			handleToDetail(songId){
				uni.navigateTo({
					url:'/pages/detail/detail?songid='+songId
				})
			},
			handleToSuggest(e){
				let value = e.detail.value;
				console.log(value)
				if(!value){
					this.searchTap = 1;
					return;
				}
				searchSuggest(value).then(res=>{
					if(res[1].data.code=='200'){
						this.searchSuggest = res[1].data.result.allMatch;
						this.searchTap = 3;
					}
				})
			}
		},
		onLoad(){
			searchHot().then(res=>{
				console.log(res)
				if(res[1].data.code =='200'){
					this.searchHot = res[1].data.data
				}
			})
			this.searchHistory = uni.getStorageSync('searchHistory');
		},
		components:{
			MicHid
		}
	}
</script>

<style>
	.search-search{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
	}
	.search-search text{
		margin: 0 26rpx;
	}
	.search-search input{
		flex:1;
		font-size: 26rpx
	}
	.search-history{
		margin: 40rpx 30rpx;
	}
	.search-history-head{
		display: flex;
		justify-content: space-between;
		margin-bottom: 36rpx;
		font-size: 28rpx;
	}
	.search-history-list{
		display: flex;
		flex-wrap: wrap;
		
	}
	.search-history-list view{
		padding: 16rpx 28rpx;
		border-radius: 40rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		background: #f7f7f7;
		font-size: 26rpx;
	}
	.search-hot{
		margin: 0 30rpx;
		font-size: 26rpx;
	}
	.search-hot-head{
		margin-bottom: 36rpx;
	}
	.search-hot-item{
		display: flex;
		align-items: center;
		margin-bottom: 58rpx;
	}
	.search-hot-top{
		color: #fd2222;
		width: 60rpx;
		margin-left: 8rpx;
	}
	.search-hot-word{
		font-size: 30rpx;
		flex:1
	}
	.search-hot-word view:nth-child(1){
		font-size: 30rpx;
	}
	.search-hot-word view:nth-child(2){
		font-size: 24rpx;
		color:#878787
	}
	.search-hot-word image{
		width: 48rpx;
		height: 22rpx;
	}
	.search-hot-count{
		color: #878787;
		font-size: 24rpx;
	}
	.search-result{
		border-top: 2rpx solid #e4e4e4;
		padding: 30rpx;
	}
	.search-result-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 2rpx solid #e4e4e4;
	}
	.search-result-word{}
	.search-result-word view:nth-child(1){
		font-size: 28rpx;
		color: #234579;
		margin-bottom: 12rpx;
	}
	.search-result-word view:nth-child(2){
		font-size: 22rpx;
		color: #898989;
	}
	.search-result-item text{
		font-size: 50rpx;
	}
	.search-suggest{
		border-top: 2rpx solid #E4E4E4;
		padding: 30rpx;
		font-size: 26rpx;
	}
	.search-suggest-head{
		color: #4574a5;
		margin-bottom: 74rpx;
	}
	.search-suggest-item{
		color: #5d5d4d;
		margin-bottom: 74rpx
	}
	.search-suggest-item text{
		color: #dbdbdb;
		margin-right: 28rpx;
		position: relative;
		top: 2rpx;
	}
</style>
